<template>
  <div class="settings row">
    <q-btn
      class="close-btn"
      fab-mini
      icon="close"
      v-close-popup
      flat
      color="sub"
    />

    <div class="col-2">
      <div class="row logo q-my-lg justify-center items-center">
        <q-img src="icons/logo.svg" style="width: 86px; height: 28px" />
      </div>

      <q-tabs
        v-model="currentSettingPage"
        vertical
        class="text-sub"
        active-color="accent"
      >
        <q-tab name="account" content-class="tab-item" no-caps>
          <div class="row no-wrap" style="width: 100%">
            <q-icon name="mdi-account-cog" size="24px" class="q-mx-md" />
            <div class="tab-text">{{ $t('settings.myAccount.title') }}</div>
          </div>
        </q-tab>
        <q-tab name="program" content-class="tab-item" no-caps>
          <div class="row no-wrap" style="width: 100%">
            <q-icon name="mdi-cog" size="24px" class="q-mx-md" />
            <div class="tab-text">
              {{ $t('settings.programSettings.title') }}
            </div>
          </div>
        </q-tab>
        <q-tab name="notification" content-class="tab-item" no-caps>
          <div class="row no-wrap" style="width: 100%">
            <q-icon name="mdi-bell" size="24px" class="q-mx-md" />
            <div class="tab-text">
              {{ $t('settings.notificationSettings.title') }}
            </div>
          </div>
        </q-tab>
        <q-tab name="shortcuts" content-class="tab-item" no-caps>
          <div class="row no-wrap" style="width: 100%">
            <q-icon name="mdi-pin" size="24px" class="q-mx-md" />
            <div class="tab-text">{{ $t('settings.shortcuts.title') }}</div>
          </div>
        </q-tab>
      </q-tabs>
    </div>
    <q-tab-panels
      v-model="currentSettingPage"
      animated
      class="col right-pages q-pa-lg"
    >
      <q-tab-panel name="account">
        <account-setting class="page" />
      </q-tab-panel>
      <q-tab-panel name="program">
        <program-setting class="page" />
      </q-tab-panel>
      <q-tab-panel name="notification">
        <notification-setting class="page" />
      </q-tab-panel>
      <q-tab-panel name="shortcuts">
        <shortcuts-setting class="page" />
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import AccountSetting from './AccountSetting.vue';
import ProgramSetting from './ProgramSetting.vue';
import ShortcutsSetting from './ShortcutsSetting.vue';
import NotificationSetting from './NotificationSetting.vue';
import { useGlobalStore } from 'stores/global-store';
const globalStore = useGlobalStore();
const currentSettingPage = computed({
  get() {
    return globalStore.currentSettingPage;
  },
  set(val: string) {
    globalStore.currentSettingPage = val;
  },
});
</script>
<style lang="sass">

.settings
  background-color: $primary
  width: 100vw
  height: 100vh
  max-height: 100vh
  overflow: hidden !important
  .logo
    width: 100%
    height: 48px
  .close-btn
    position: absolute
    top: 18px
    right: 36px
    z-index: 99
  .right-pages
    background-image: linear-gradient(to bottom right, #242424, #1c1c1c)
  .page
    .title
      font-size: 24px
.tab-item
  width: 100% !important
  .tab-text
    font-size: 16px
</style>
